<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Deck</title>
</head>
<body>
   <div id="app">
     <div>
       <h2>货币转换</h2>
       <p>人民币转美元，今天的汇率是1人民币={{hl}}美元</p>
       <input type="text" v-model="memory1">  <span>{{memory1 | tran | join('￥')}}</span>
        <br/>
       <input type="text" disabled v-model="memory2"> <span>{{memory2 | tran | jion('$')}}</span>
       <br/>
       <p>{{tips}}</p>
     </div>
   </div>
   <script src="./vue.js"></script>
   <script type="text/javascript">
     var app = new Vue({
       el: '#app',
       data: {  
         hl: 0.1476,
         memory1: 0,
         tips: ''
        },
       computed: {  
            memory2: function(){
            var result = this.memory1 * this.hl
                return result.toFixed(2)
            },
        },
       watch: {  
          memory1: function(newValue, old) {
            if (newValue > 10000) {
                this.memory1 = 0
                this.tips = '你输入的数据不能超过10000'
            } else {
                this.tips = ''
            }
          }
        },
       filters: {
            join: function(value, params) {
            return params + value
            },
            tran: function(value) {
            return value
            }
        },
       methods: {

       }
    })

   </script>
</body>
</html>